<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>我的音乐网站</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">my music player</div>
<!--        <ul class="layui-nav layui-layout-left">-->
<!--            <li class="layui-nav-item"><a href="">nav 1</a></li>-->
<!--            <li class="layui-nav-item"><a href="">nav 2</a></li>-->
<!--            <li class="layui-nav-item"><a href="">nav 3</a></li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">nav groups</a>-->
<!--                <dl class="layui-nav-child">-->
<!--                    <dd><a href="">menu 11</a></dd>-->
<!--                    <dd><a href="">menu 22</a></dd>-->
<!--                    <dd><a href="">menu 33</a></dd>-->
<!--                </dl>-->
<!--            </li>-->
<!--        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-username"></i>
                    admin
<!--                    <span id="username"></span>-->
                </a>
<!--                <dl class="layui-nav-child">-->
<!--                    <dd><a href="">set 1</a></dd>-->
<!--                    <dd><a href="">set 2</a></dd>-->
<!--                </dl>-->
            </li>
<!--            <li class="layui-nav-item"><a href="./logout">Sign out</a></li>-->
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
<!--                    <a class="" href="javascript:;">menu group 1</a>-->
                    <dl class="layui-nav-child">
                        <dd><a href="/main.html" id="mainpage">主页</a></dd>
                        <dd><a href="/index.html">音乐列表</a></dd>
                        <dd><a href="/upload.html;">上传音乐</a></dd>
                        <dd><a href="/detail.html;">音乐详情</a></dd>
<!--                        <dd><a href="/login.html">登录</a></dd>-->
                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body" style="overflow: auto;overflow-scrolling: auto" >
        <!-- 内容主体区域 -->

        <iframe id="iframeMain" src="" style="width: 100%;height:100%"></iframe>
    </div>
    <div class="layui-footer" style="width: auto;height: auto;padding: 10px;margin: 10px;overflow: auto">
        <!-- 底部固定区域 -->
            <div style="width: 50px;height: 50px;float: left;display: inline">
                <img id="musicImg" src="./icon/music.png" style="width: 50px;height: 50px;float: left;"/>
            </div>
            <div style="margin-left: 10px">
                <audio id="audioPlayer" controls=""></audio>
            </div>
    </div>

    
</div>

<script src="./layui/layui.js"></script>
<script>
    //JavaScript代码区域
    $(document).ready(function(){
        $("dd>a").click(function (e) {
            console.log(1);
            e.preventDefault();
            $("#iframeMain").attr("src",$(this).attr("href"));
        });
        window.addEventListener('storage', function (e){
            //layui.$("#audioPlayer").attr("src","http://172.26.63.130:8080"+"/mp3/"+data.musicPath);
            if(true){
                var data = e.newValue;
                //alert(e.newValue);
                if(e.key === "playingMusicPath"){
                    $("#audioPlayer").attr("src","/mp3/"+data);
                    if(data != null)
                        $("#audioPlayer")[0].play();
                }
                else if(e.key === "playingImgPath"){
                    $("#musicImg").attr("src","/img/"+data);
                }
                // else if($("#audioPlayer").attr("src")==null){
                //     $("#audioPlayer").attr("src","/mp3/"+localStorage[playingMusicPath]);
                //     $("#audioPlayer")[0].play();
                //     $("#musicImg").attr("src","/img/"+playingImgPath);
                // }
            }

            //alert(e.key+":"+e.oldValue+"->"+e.newValue+"."+e.url)
            //console.log(e.key+":"+e.oldValue+"->"+e.newValue+"."+e.url);
        })
        $("#mainpage").click();
        $.ajax({
            url:'/user',
            method:'get',
            dataType:'JSON',
            contentType: "application/json;charset=utf-8",
            success:function(res){
                if(res.code==0){
                    console.log(res.username);
                    $("#username").text(res.username);
                }
                else
                    $("#username").text("未登录");
            }
        })
    });
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>